<template>
    <scroll-view class="message-clock-wrapper" :scroll-y="true">
        <view class="message-clock-top-time">9:00</view>
        <view class="message-clock-top-tip">
            <image src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg" class="message-clock-top-image">
            <view class="message-clock-top_background">
               <view class="message-clock-top-content">{{ClockTopMessage.content}}</view>
            </view>
        </view>
        <view v-if="ClockMessage.length > 0 " class="messge-clock-list-data background">
             <view v-for="(item , pos) in ClockMessage"
                    :key="item"
                    :index="pos"
                    class="messge-clock-list-data"
                    @click="itmeClick(item)"
             >
             <view class="message-clock-list-time">{{item.showTime}}</view>
             <view class="message-clock-list-background">
                 <view class="message-clock-list-title">{{item.title}} </view>
                 <view class="message-clock-list-line"></view>
                 <view class="message-clock-list-bottomview">
                     <image src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg" class="message-clock-list-image">
                     <view class="message-clock-list-content-backview">
                        <view class="message-clock-list-content-title">{{item.time}}</view>
                        <view class="message-clock-list-content-subtitle">{{item.status}}</view>   
                     </view>
                 </view>
             </view>
             </view>
         </view>
    </scroll-view>
</template>

<script>
export default {
    data(){
        return{
             ClockTopMessage:{
                 content:"欢迎使用上下班打卡系统，公司设定的打卡规则为周一至周五9:00-18:00，系统会在上班前十分下班准时钟提醒"
             },
            ClockMessage:[
                {
                    title:"打卡提醒",
                    image:"http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
                    time:"18:00下班打卡",
                    status:"立即打卡",
                    showTime:"17:22",
                },
                   {
                    title:"打卡结果",
                    image:"http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
                    time:"09：00上班打卡·正常",
                    status:"查看详情",
                    showTime:"19:22",
                },
                   {
                    title:"打卡结果",
                    image:"http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
                    time:"16：00下班打卡·早退",
                    status:"查看详情",
                    showTime:"14:22",
                },
                 {
                    title:"打卡结果",
                    image:"http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
                    time:"16：00下班打卡·早退",
                    status:"查看详情",
                    showTime:"14:22",
                },
            ],
         isData: false
        };
    },
    methods:{
        itmeClick(item ){
            console.log(item.title);
        }
    }
}
</script>

<style lang="scss">
.message-clock-wrapper{
    background-color: #FAFBFB;
    margin-bottom: 30px;
}
.message-clock-top-time{
    color: #C0C0C0;
    font-size: 12px;
    text-align: center;
    padding-top: 14px;
}
.message-clock-top-tip{
    padding-left: 0px;
    margin-top: 14px;
    display: flex;

    .message-clock-top-image{
        margin-top: 0px;
        margin-left: 10px;
        height: 40px;
        width: 40px;
        border-radius: 20px;
    }
    .message-clock-top_background{
        flex: 1px;
        padding-left: 7px;
        margin-right: 70px;
        // height: 104px;
        background-color: white;
        
        .message-clock-top-content{
            font-size: 14px;
            color: #252525;
            padding-top: 12px;
            padding-left: 17px;
            padding-right: 12px;
            padding-bottom: 12px; 
        }
    }
   
}

.messge-clock-list-data{
    margin-top: 24px;
    &.background{
        display: block;
        margin-top: 0px;
        padding-left: 0px;
        padding-top: 0px;
    }
    .message-clock-list-time{
         color: #C0C0C0;
         font-size: 12px;
         text-align: center;
         padding-top: 0px;
    }
    .message-clock-list-background{
        background-color: white;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 14px;
        padding-bottom: 0px;
        height: 115px;
        border-radius: 10px;
        .message-clock-list-title{
             padding-left: 16px;
             padding-top: 12px;
             font-size: 14px;
             color: #C0C0C0;
        }
        .message-clock-list-line{
            margin-left: 16px;
            margin-top: 12px;
            margin-right: 16px;
            height: 0.5px;
            background-color:#E8E8E8;
        }
        .message-clock-list-bottomview{
            margin-top: 0px;
            height: 71px;
            background-color:white;
            display: flex;
            .message-clock-list-image{
                margin-left: 22px;
                margin-top: 18px;
                width: 40px;
                height: 40px;
                border-radius: 20px;
            }
            .message-clock-list-content-backview{
                flex: 1px;
                display: block;
                padding-left: 10px;
                margin-top: 0px;
                .message-clock-list-content-title{
                    padding-top: 14px;
                    height: 22px;
                    font-family: PingFangSC-Medium,PingFang SC;
                    color: #252525;
                    font-size: 16px;
                }
                .message-clock-list-content-subtitle{
                    padding-top: 1px;
                    padding-bottom: 13px;
                    color: #252525;
                    font-size: 14px;
                }

            }
        }
    }
   
 
}



</style>